<template>
  <el-tree ref="tree" :data="data" :props="props" :show-checkbox="true" :node-key="`id`" :default-checked-keys="defaultCheckedKeys" @node-click="handleNodeClick" @check-change="handleCheckChange"></el-tree>
</template>

<script>
export default {
  name: 'roleTree',
  props: {
    data: {
      type: Array,
      required: true
    },
    props: {
      type: Object,
      required: true
    },
    defaultCheckedKeys: {
      type: Array,
      required: false,
      default: []
    }
  },
  watch: {
    active: function (newVal) {
    }
  },
  data: () => ({
    active: []
  }),
  methods: {
    handleNodeClick(data, node) {
    },
    handleCheckChange() {
      this.$emit('menuChecked', [...this.$refs.tree.getHalfCheckedKeys(), ...this.$refs.tree.getCheckedKeys()])
    }
  }
}
</script>

<style></style>
